<template>
	<view style="background-color: #fff;border-radius: 20rpx 20rpx 0px 0px;padding-bottom: 30rpx;
		box-sizing: border-box;">
		<view class="space-between commodity">
			<view class="left_commodity">
				<image :src="shopAll.image" mode=""></image>
			</view>
			<view class="right_commodity">
				<view class="title">{{shopAll.name}}</view>
				<view class="text">{{shopAll.subtitle}}</view>
				<view class="space-between">
					<text :style="{maxWidth:'95%'}">{{shopAll.dispatch_type}}</text>
				</view>
				<view class="pay"><text>￥</text><text>{{shopAll.price}}</text><text>￥{{shopAll.oprice}}</text></view>
			</view>
		</view>
		<view class="space-between" style="padding: 20rpx;box-sizing: border-box;">
			<view>数量</view>
			<view class="flex-end Addition">
				<view @click="alteration('1')">
					<text></text>
				</view>
				<view>
					<text>{{num}}</text>
				</view>
				<view @click="alteration('2')">
					<uni-icons type="plusempty" size="16" color="#333"></uni-icons>
				</view>
			</view>
		</view>
		<view class="but" @click="submit()">{{sureState=='1'?'立即加入':'立即购买'}}</view>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue';
	const props = defineProps({
		shopAll: {
			type: Object
		},
		sureState:{
			type: String
		}
	});
	const num = ref(1)
    const emits = defineEmits(['submit']);
	function alteration(number) {
		switch (number) {
			case '1':
				if (num.value == 1) {
					return
				}
				num.value--
				break;
			case '2':
			num.value++
				break;
		}
	}
	function submit(){
		emits('submit',num.value)
	}
</script>

<style scoped lang="less">
	@import url('../groupBenefits/less/shopGrid.less');

	.Addition {
		width: 50%;

		view {
			width: 60rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		view:nth-of-type(1) {
			text {
				display: inline-block;
				width: 20rpx;
				height: 2rpx;
				background-color: #333;
			}
		}

		view:nth-of-type(2) {
			width: 80rpx;

			text {
				width: 80rpx;
				text-align: center;
				padding: 3rpx 10rpx;
				box-sizing: border-box;
				background-color: rgba(65, 163, 255, .2);
				color: #333333;
				border-radius: 5px;
			}

		}

		view:nth-of-type(3) {
			text {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.but {
		margin: 20rpx auto 0px;
		width: 230rpx;
		height: 68rpx;
		background: linear-gradient(104deg, #41A3FF, #1B91FF);
		border-radius: 6px;
		font-size: 27rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 68rpx;
	}
</style>
